<script setup>
import { computed } from 'vue'; // 添加 computed
import { ElMessageBox } from 'element-plus'; // 导入 ElMessageBox
import SvgIcon from '@/components/SvgIcon/index.vue'; // 导入 SvgIcon 组件
import { formatDate } from '@/utils/day'; // 导入日期格式化工具函数
import { formatDuration } from '@/utils/time'; // 导入视频时长格式化工具函数

const props = defineProps({
  video: {
    type: Object,
    required: true
  },
  // 添加控制属性 - 是否显示管理控件（删除按钮和状态标签）
  showControls: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['view-detail', 'delete']);

// 计算属性：视频状态文本和样式
const statusInfo = computed(() => {
  const statusMap = {
    'approved': { text: '公开', class: 'status-approved', icon: 'check-circle' },
    'hidden': { text: '隐藏', class: 'status-hidden', icon: 'eye-slash' },
    'rejected': { text: '已拒绝', class: 'status-rejected', icon: 'close-circle' },
    'pending': { text: '审核中', class: 'status-pending', icon: 'clock' },
    'manualReview': { text: '人工审核', class: 'status-pending', icon: 'clock' },
  };
  
  // 默认为未知状态
  return statusMap[props.video.status] || { 
    text: '未知', 
    class: 'status-unknown',
    icon: 'question-circle'
  };
});

function handleClick() {
  // 确保传递正确的视频ID，同时兼容id和video_id两种格式
  const videoId = props.video.video_id || props.video.id;
  console.log('视频 ID:', videoId);
  emit('view-detail', videoId);
}

function handleDelete(event) {
  event.stopPropagation();
  
  // 显示确认删除弹窗
  ElMessageBox.confirm(
    `确定要删除视频 "${props.video.title}" 吗？`, 
    '删除视频', 
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
      closeOnClickModal: false,
      customClass: 'delete-confirm-dialog',
      confirmButtonClass: 'confirm-delete-btn',
      cancelButtonClass: 'cancel-delete-btn'
    }
  ).then(() => {
    // 用户点击确定，执行删除
    emit('delete', props.video.id, event);
  }).catch(() => {
    // 用户点击取消，不执行任何操作
  });
}
</script>

<template>
  <div class="video-card" @click="handleClick">
    <div class="video-cover-container">
      <img :src="video.cover_url" alt="视频封面" class="video-cover">
      <span class="video-duration">{{ formatDuration(video.duration) }}</span>
      
      <!-- 添加视频状态标识 -->
      <div v-if="showControls" :class="['video-status', statusInfo.class]">
        <SvgIcon :icon-class="statusInfo.icon" size="14" />
        <span>{{ statusInfo.text }}</span>
      </div>
    </div>
    <div class="video-info">
      <h4 class="video-title">{{ video.title }}</h4>
      <div class="video-stats">
        <span class="stat">
          <SvgIcon icon-class="unlove"/>
          <span style="margin-left: 4px;">{{ video.likes_count || 0 }}</span>
        </span>
        <!-- <span class="stat">
          <SvgIcon icon-class="view"/>
          <span style="margin-left: 4px;">{{ video.view_count || 0 }}</span>
        </span> -->
        <span class="video-date">{{ formatDate(video.created_at) }}</span>
      </div>

      <!-- 拒绝原因 (仅当状态为拒绝时显示) -->
      <div v-if="showControls && video.status === 'rejected' && video.reject_reason" class="reject-reason">
        <span class="label">拒绝原因:</span>
        <span class="reason-text">{{ video.reject_reason }}</span>
      </div>
    </div>
    <button  v-if="showControls" class="delete-button" @click="handleDelete">
      <i class="icon-delete">🗑️</i>
    </button>
  </div>
</template>

<style scoped lang="scss">
.video-card {
  background-color: #1f2129;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    
    .delete-button {
      opacity: 1;
    }
    
    .video-cover {
      transform: scale(1.05);
    }
  }

  .video-cover-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;

    .video-cover {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .video-duration {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.8rem;
    }
    
    // 视频状态指示器
    .video-status {
      position: absolute;
      top: 8px;
      left: 8px;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.75rem;
      display: flex;
      align-items: center;
      gap: 4px;
      
      &.status-approved {
        background-color: rgba(103, 194, 58, 0.8);
        color: #fff;
      }
      
      &.status-hidden {
        background-color: rgba(144, 147, 153, 0.8);
        color: #fff;
      }
      
      &.status-rejected {
        background-color: rgba(245, 108, 108, 0.8);
        color: #fff;
      }
      
      &.status-pending {
        background-color: rgba(230, 162, 60, 0.8);
        color: #fff;
      }
      
      &.status-unknown {
        background-color: rgba(144, 147, 153, 0.8);
        color: #fff;
      }
    }
  }

  .video-info {
    flex: 1;
    width: 100%;
    padding: 12px;

    .video-title {
      margin: 0 0 8px 0;
      font-size: 1rem;
      font-weight: 500;
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .video-stats {
      display: flex;
      align-items: center;
      font-size: 0.85rem;
      color: #99a3a7;

      .stat {
        display: flex;
        align-items: center;
        margin-right: 12px;

        i {
          margin-right: 4px;
        }
      }

      .video-date {
        margin-left: auto;
        font-size: 0.8rem;
      }
    }
    
    // 拒绝原因样式
    .reject-reason {
      margin-top: 8px;
      padding: 6px 8px;
      background-color: rgba(245, 108, 108, 0.1);
      border-radius: 4px;
      font-size: 0.8rem;
      
      .label {
        color: #f56c6c;
        font-weight: 500;
        margin-right: 4px;
      }
      
      .reason-text {
        color: #e6a9a9;
      }
    }
  }

  .delete-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 2;

    &:hover {
      background-color: rgba(255, 73, 73, 0.8);
    }
  }
}

/* 自定义确认对话框样式 */
:global(.delete-confirm-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

:global(.confirm-delete-btn) {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

:global(.confirm-delete-btn:hover) {
  background-color: #e04747;
  border-color: #e04747;
}

:global(.cancel-delete-btn) {
  border-color: #909399;
  color: #909399;
}
</style>